<template>

	<div class="page">
		<div class="register-icon">
			<img class="icon-img" :src="icon"/>
		</div>
		<mt-field label="姓名" placeholder="请输入姓名" v-model="info.cnName"></mt-field>
		<!--<div class="sex-div">
			<label class="title-sex font-15">性别</label>
			<Select v-model="info.sex" style="width:200px">
			    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			</Select>
		</div>-->
		<mt-field label="手机号" placeholder="请输入手机号" v-model="info.mobile" :disabled="!(mobile || mobile) == ''"></mt-field>
		<!--<mt-field  label="验证码" placeholder="请输入验证码" v-model="info.captcha">
		  <mt-button class="captcha" @click="getSms()">{{btnValue}}</mt-button>
		</mt-field>-->
		<div style="display: flex;align-items: center;padding-left: 10px;">
			<label >出生日期</label>
			<input label="出生日期" placeholder="请输入出生日期" type="date" style="margin-left: 10px;" v-model="info.birthday"/></mt-field>
		</div>
		<div style="width: 50%;margin-left: 25%;">
			<mt-button type="primary" class="ensure" @click="ensure()">确定</mt-button>
		</div>
	</div>
</template>


<style>
	@import url("register.css");
	@import url("../../common/common.css");
</style>
<script>
	import $ from 'jquery'
	import { MessageBox } from 'mint-ui';
	export default{
		name:'register',
		data:function(){
			return {
				info:{
					username:'111',
					mobile:'',
					birthday:'',
					sex:'',
					captcha:'',
				},
				btnValue:'获取验证码',
				timer:null,
				resCaptcha:'',
				cityList: [
                    {
                        value: '1',
                        label: '男'
                    },
                    {
                        value: '2',
                        label: '女'
                    }
                ],
                model1: '',
                openId:null,
                icon:'',
                mobile:''
			}
		},
		created(){
			document.title = "完善信息";
			this.info.birthday = (new Date).toISOString().substr(0,10);
			this.openId = this.utils.getQueryString('openId') || '';
			this.info.openId = this.openId
			this.info.companyId = this.utils.state;
			if(!this.openId){
				this.info.openId = this.$route.params.openId;
			}
			if(this.utils.state == 'tony'){
				this.icon = require('../../../static/imags/shareicon.png');
			}else{
				this.icon = require('../../../static/imags/shareicon-pz.png');
			}
			this.getUserInfo();
			// this.openId 为空表示 是非主动注册 这个时候openId需要从路由参数值中获取
		},
		methods:{
			getUserInfo(){
				var _self = this;
				$.ajax({
				  	type:"post",
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "fashion/getUserInfo",
				  	data:JSON.stringify({
				  		openId:_self.info.openId
				  	}),
				  	success:function(res){
				  		console.log(JSON.stringify(res));
				  		_self.info = res.data; 
				  		_self.mobile = _self.info.mobile;
				  	},
				  	error:function(e){
				  		
				  	}
				  });
			},
			getSms(){
				var _self = this;
				if(!_self.info.mobile || _self.info.mobile == ''){
					_self.$Message.success('请输入正确的手机号');
					return;
				}
				if(_self.btnValue != '获取验证码'){
					return;
				}
				$.ajax({
				  	type:"post",
				  	contentType:'application/json;charset=UTF-8',
				  	url:this.utils.rootUrl + "fashion/getSms",
				  	data:JSON.stringify({
				  		mobile:_self.info.mobile
				  	}),
				  	success:function(res){
				  		_self.$Message.success(res.msg);
				  		if(res.status == 200){
				  			_self.getCheckCode();
				  			_self.resCaptcha = res.captcha;
				  		}
				  	},
				  	error:function(e){
				  		
				  	}
				  });
			},
			getCheckCode(){
				var count = 30;
				var _self = this;
             	_self.timer = window.setInterval(function(){
             		count--;
             		if(count < 1){
             			window.clearInterval(_self.timer);
             			_self.btnValue = '获取验证码';
             		}else{
             			_self.btnValue = count+'秒';
             			
             		}
             	},1000);
			},
			ensure(){
				var _self = this;
				if(!_self.info.cnName || _self.info.cnName == ''){
					_self.$Message.warning('请输入姓名！');
					return;
				}
				
				if(!_self.info.mobile || _self.info.mobile == ''){
					_self.$Message.warning('请输入手机号！');
					return;
				}
//				if(!_self.info.captcha || _self.info.captcha != _self.resCaptcha){
//					_self.$Message.warning('验证码不正确！')
//					return;
//				}
				MessageBox.confirm('本次提交后手机号将不能再次修改，请确认手机号是否填写正确').then(action => {
        				if(action == 'confirm'){
        					$.ajax({
						  	type:"post",
						  	contentType:'application/json;charset=UTF-8',
						  	url:this.utils.rootUrl + "fashion/saveMember",
						  	data:JSON.stringify(_self.info),
						  	success:function(res){
						  		if(!_self.openId){
						  			_self.mobile = _self.info.mobile;
						  			_self.$router.back(-1);
						  			_self.$Message.success('维护完成');
						  		}else{
						  			_self.$Message.success(res.msg);
						  			_self.$router.push('/member-center?openId='+_self.openId);
						  		}
						  	},
						  	error:function(e){
						  		
						  	}
						  });
        				}
				});
			}
		}
	}
</script>

